{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="/static/img/logo/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="Toy Chat Application">
    <title>聊天室</title>

    <link rel="stylesheet" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">
    <script src="/static/assets/plugins/jquery/jquery.min.js"></script>
    <script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/style.css' %}"/>
    <link rel="stylesheet" href="/static/css/footer.css">
    <link rel="stylesheet" href="/static/css/header.css">

    {% block head %}
    {% endblock %}
    
</head>
<body>

{% include 'header.html' %}

<div class="container">
    <div class="page-header">
        <h1>
            <small>点击一个好友进行聊天！</small>
        </h1>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div id="user-list" class="list-group">
                <a href="" class="list-group-item disabled">
                    <h4 class="list-group-item-heading">房间</h4>
                    {# Users go here #}
                </a>
            </div>
        </div>
        <div class="col-md-8 p-2  border">
            <div class="panel panel-info">
                <div class="panel-heading border-bottom">
                    <h4 class="panel-title">聊天</h4>
                    
                </div>
                <div>
                    <ul id="messages" class="messages">
                        {# Messages go here #}
                    </ul>
                </div>
                <div class="panel-footer">
                    <div class="input-group">
                        <button class="btn btn-outline-secondary" type="button">:)</button>
                        <input id="chat-input" type="text"
                               class="form-control input"
                               placeholder="在这里输入你的消息 ..."
                               maxlength="500">
                        <span class="input-group-btn">
                        <button class="btn  btn-outline-secondary "
                                id="btn-send">
                            发送</button>
                    </span>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<!-- {% include 'footer.html' %} -->

<script>
    let sessionKey = '{{ request.session.session_key }}';
    let currentUser = '{{ request.user.username }}';
</script>
<script src="{% static 'js/chat.js' %}"></script>


</body>
</html>